// 1.引入vue
import Vue from 'vue';
// 2.引入 Vuex
import Vuex from 'vuex';
// 3.vue 使用 vuex
Vue.use(Vuex);
// 4.实例化 store 对象
const store = new Vuex.Store({
  // 仓库，状态：放置整个项目中所有能够全局共用的状态
  state: {
    // 当前城市
    curCity: "",
    // 定义初始的购物车数据:本地有这数据，就把json格式的字符串转数组或对象：否则就是空对象
    FilmsCard: localStorage.getItem('FilmsCard') ? JSON.parse(localStorage.getItem('FilmsCard')) : []
  },
  // 类似计算属性,对当前 state 里面的某个状态做派生。
  getters: {
    /**
     * 计算总数量，首先获取商品列表
     */
    totalNum(state) {
      // console.log(state);
      let total = 0;
      state.FilmsCard.forEach(item => {
        total += item.filmNum; //数量
      });
      return total;
    },
    /**
     * 计算总价格
     */
    totalPrice(state) {
      let total = 0;
      state.FilmsCard.forEach(item => {
        total += item.filmNum * item.filmPrice; //总价
      });
      return total;
    }

  },
  // 能够唯一修改 state 状态的东西。同步操作
  mutations: {
    /**
     * 修改当前城市
     */
    xiuCity(state, payload) {
      state.curCity = payload;
      console.log(state.curCity);
    },
    /**
     * @param {Object} payload 传过来的添加的电影票
     *      filmId:   电影ID
     *      filmName: 电影名称
     *      filmPrice: 电影价格
     *      filmNum:   电影票的数量
     *      state ：上面的原始数据（传参)
     *
     */
    // 点击添加电影票
    addFilms(state, payload) {
      // console.log(JSON.stringify(payload));
      // payload 传过来的添加的电影票
      // 点击+号添加传过来的id，保存下来做判断
      let filmId = payload.filmId;

      // 点击+号添加时，判断这个电影是否已经加入购物车
      // es5的some()方法：用于检测数组中是否有元素大于多少，最终的到的是布尔值true 还是false
      let index = -1;
      let isZai = state.FilmsCard.some((item, i) => {
        // i:下标,取这个避免冲突，如果有这个电影的id
        if (item.filmId === filmId) {
          index = i;
          return true;
        }
        return false; //否则
      });
      if (isZai) {
        // 操作state里的 filmsCard,如果存在，就对其加1
        state.FilmsCard[index].filmNum++;
        // state.FilmsCard.filmPrice = filmNum * filmPrice
      } else {
        // 传来后保存到仓库的 FilmsCard
        state.FilmsCard.push({
          filmId: payload.filmId,
          filmName: payload.name,
          filmPrice: parseInt(Math.random() * 50 + 29),
          filmNum: 1,
          filmType: payload.filmType.name
        });
      }

      // 保存我穿过来的电影数据到本地 ,以为他是数组或对象，就要把对象和数组转成json格式的字符串保存
      localStorage.setItem('FilmsCard', JSON.stringify(state.FilmsCard));
    },
    /**
     *点击减少电影票
     */
    minusFilm(state, payload) {
      // console.log(payload)
      let index = -1;
      state.FilmsCard.forEach((item, i) => { // forEach遍历
        if (item.filmId === payload.filmId) {
          index = i;
        }
      });
      // 判断是否已有票
      if (index > -1) {
        let film = state.FilmsCard[index]; // 拿到数组下的电影票了
        if (film.filmNum > 1) { // 如果电影票大于 1
          film.filmNum--; // 减一
        } else {
          state.FilmsCard.splice(index, 1); // 删除他的下标，数量为1
        }
      }
      // 减掉后将数据写入到localStorage
      localStorage.setItem('FilmsCard', JSON.stringify(state.FilmsCard));
    },
    /**
     * 清空购物车
     */
    clearFilms(state) {
      state.FilmsCard = [];
      // 清空购物车再清楚本地存储
      localStorage.removeItem('FilmsCard')
    }

  },

  // 做异步操作的时候，要用到
  actions: {
    getCityName(context) {
      let myCity = new BMap.LocalCity();
      myCity.get(function (result) {
        let name = result.name.substr(0, result.name.length - 1);
        context.commit('xiuCity', name);
      });
    }
  },

  // 对 store做拆分，拆分成一个一个的小 store
  modules: {

  }

});

// 5.暴露 store 实例对象
export default store;
